<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>The Maqetta Workspace</title>
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td>
	<a href="home.html">Home</a> &gt; <a href="userguide.html">Using Maqetta</a>
		 &gt; <a href="workspace.html">The Maqetta Workspace</a>
    </td>
    <td class="prevnext">
    <a href="wsMenubar.html">Previous</a> / <a href="wsPalettes.html">Next</a>
    </td></tr>
</table>

<h1>Page Editor Canvas</h1>

<p>The <b>Page Editor canvas</b>, located in the center window of the Maqetta workspace, is the user's workspace and where the contents of opened files are displayed.
To begin adding content to the canvas you must first either open a new file using the <b>New &gt; HTML File...</b> menu option, or open an existing file from the the <b>Files palette</b>.
Once a file is opened, you can view the file's contents in either <b>Design mode</b>, <b>Source mode</b>, or one of the <b>Split modes</b>. The default is Design mode. 
You can switch modes by clicking on one of the icons in the right side of the <a href="peToolbar.html">Page Editor Toolbar</a>. 

<p><a href="img/PageEditorCanvas.png" target="_blank"><img alt="image" height="300" src="img/PageEditorCanvas.png" style="margin: 1em 1em 0pt 0pt;" /></a> </p>

<p>In Design mode, the canvas contains real Ajax widgets (vs. raster facsimiles) so it is true WYSIWYG. 
You add widgets to the canvas by dragging/dropping from the widget palette. 
The design canvas works closely with the:</p>

<ul style="margin-top: 0pt;" type="disc">
 <li><b>Widgets palette</b> - shows the catalog of widgets that you can add to the HTML page</li>
 <li><b>Outline palette</b> - shows the object/widget hierarchy</li>
 <li><b>Properties palette</b> - allows changes to CSS properties and various other widget properties that affect how a widget looks</li>
</ul>

<p>In Source mode, the canvas shows the HTML source code for
your page. The source code you see is the actual HTML source code that is saved
by Maqetta. Maqetta is designed to create &quot;developer-ready&quot; UI prototypes in
that the code exported by Maqetta is designed to allow developers to modify
incrementally to add interaction and business logic while preserving the
various visual features (e.g., CSS files and images) that the designers
authored in Maqetta.</p>

<p>Maqetta includes bi-directionality between
design and source views. For example, you can edit the label text strings in
source view and delete widgets in source view, and these changes will be
reflected when returning to design view. The Maqetta team is working on
sophisticated language parsers (HTML, CSS, JavaScript) that will enhance the
product&#39;s ability to deal with arbitrary source code in future releases so long
as the widgets are represented within HTML markup.</p>



<p class="prevnext"><a href="wsMenubar.html">Previous</a> / <a href="wsPalettes.html">Next</a></p>

</div>  <!-- pagebody -->

<!-- Footer -->
<!--
<iframe src ="footer.html" width="100%" height="60" frameborder="0" scrolling="no" >
  <p>Your browser does not support iframes.</p>
</iframe> 
-->
</body>
</html>